import React from "react";
import { useNavigate } from "react-router-dom";
import { Dropdown, Space, Button, Checkbox, Form, Input } from "antd";
import {
  DownloadOutlined,
  GlobalOutlined,
  DownOutlined,
  LockOutlined,
  UserOutlined
} from "@ant-design/icons";
import "./index.css";

const items1 = [
  {
    key: "1",
    label: "下载客户端"
  },
  {
    key: "2",
    label: "下载证书",
    children: [
      {
        key: "2-1",
        label: "下载应用证书"
      },
      {
        key: "2-2",
        label: "证书安装文档"
      }
    ]
  },
  {
    key: "3",
    label: "RESTFUL API"
  },
  {
    key: "4",
    label: "Web组件"
  }
];

const items2 = [
  {
    key: "5",
    label: "简体中文"
  },
  {
    key: "6",
    label: "繁体中文"
  },
  {
    key: "7",
    label: "ENGLISH"
  }
];

const App: React.FC = () => {
  let navigate = useNavigate();

  const onFinish = (values: string) => {
    console.log("Received values of form: ", values);
    localStorage.setItem("token", "2");
    navigate("/");
  };

  return (
    <div className="container">
      <div className="background-container"></div>
      <div className="wrapper">
        <div className="oem">
          <div className="oem-img"></div>
        </div>

        <div className="index">
          <div className="wrap-header-bar">
            <div className="app-index-bar" style={{ width: "504px" }}>
              <div
                className="app-index-bar-item"
                style={{ paddingRight: "16px" }}
              >
                <Dropdown
                  menu={{
                    items: items1
                  }}
                  trigger={["click"]}
                >
                  <a onClick={e => e.preventDefault()}>
                    <DownloadOutlined
                      style={{
                        fontSize: "14px",
                        cursor: "pointer",
                        marginRight: "5px"
                      }}
                    />
                    <Space>
                      下载
                      <DownOutlined />
                    </Space>
                  </a>
                </Dropdown>
              </div>
              <div className="app-index-bar-item">
                <Dropdown
                  menu={{
                    items: items2
                  }}
                  trigger={["click"]}
                >
                  <a onClick={e => e.preventDefault()}>
                    <GlobalOutlined
                      style={{
                        fontSize: "14px",
                        cursor: "pointer",
                        marginRight: "5px"
                      }}
                    />
                    <Space>
                      简体中文
                      <DownOutlined />
                    </Space>
                  </a>
                </Dropdown>
              </div>
            </div>
          </div>
          <div className="wrap-login">
            <div className="index-panel">
              <div className="logo-wrapper">
                <img
                  className="logo-image"
                  src={require("./images/logo.png")}
                />
              </div>
              <div className="title-wrapper">企业内容门户</div>
              <div className="signin-wrapper">
                <Form
                  name="normal_login"
                  className="login-form"
                  initialValues={{
                    remember: true
                  }}
                  onFinish={onFinish}
                >
                  <Form.Item
                    name="username"
                    rules={[
                      {
                        required: true,
                        message: "请输入账号!"
                      }
                    ]}
                  >
                    <Input
                      prefix={<UserOutlined className="site-form-item-icon" />}
                      placeholder="请输入账号"
                      className="login-form-input"
                    />
                  </Form.Item>
                  <Form.Item
                    name="password"
                    className="login-form-item"
                    rules={[
                      {
                        required: true,
                        message: "请输入密码!"
                      }
                    ]}
                  >
                    <Input
                      prefix={<LockOutlined className="site-form-item-icon" />}
                      type="password"
                      placeholder="请输入密码"
                      className="login-form-input"
                    />
                  </Form.Item>
                  <Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                      <Checkbox>记住登录状态</Checkbox>
                    </Form.Item>
                  </Form.Item>

                  <Form.Item>
                    <Button
                      type="primary"
                      htmlType="submit"
                      className="login-form-button"
                    >
                      登 录
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            </div>
          </div>
          <div className="wrap-footer">
            <div>
              <div className="login-view-all">
                登录即表示同意<a>用户协议</a>
                <span>、 </span>
                <span>
                  <a>隐私政策</a>
                </span>
              </div>
            </div>
            <div className="split"></div>
            <div className="app-index-about" style={{ marginTop: "0px" }}>
              <span className="version-information">版本信息</span>
              <div className="app-index-about-row">
                <span className="app-index-separator">&nbsp;I&nbsp;</span>
                <a
                  className="app-index-record"
                  href="http://beian.miit.gov.cn"
                  target="_blank"
                >
                  沪ICP备09089247号-9
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;
